<div class="row">
    <div class="col-md-12">
        <div class="box box-info">
            <div class="box-header">
                <i class="fa fa-table"></i>
                <h3 class="box-title">List Content</h3>
            </div><!-- /.box-header -->
            <div class="box-body">
            	<table cellpadding="0" cellspacing="0" border="0" class="display table table-bordered table-striped" id="example">
	<thead>
		<tr>
        	<th></th>
			<th>Rendering engine</th>
			<th>Browser</th>
			<th>Platform(s)</th>
			<th>Engine version</th>
			<th>CSS grade</th>
		</tr>
	</thead>
	<tfoot>
		<tr>
        	<th></th>
			<th>Rendering engine</th>
			<th>Browser</th>
			<th>Platform(s)</th>
			<th>Engine version</th>
			<th>CSS grade</th>
		</tr>

	</tfoot>
	<tbody>
    	
    	<tr data-position="1" class="odd_gradeX" id="100"><td>1</td>
			<td class="read_only">Trident</td>
			<td>Internet Explorer 4.0</td>
			<td>Win 95+</td>
			<td class="center">4</td>

			<td class="center"><input type="text" name="awdwad" class="integer-input" /></td>
		</tr>
		<tr data-position="2" class="even_gradeC" id="101"><td>2</td>
			<td>Trident</td>
			<td>Internet Explorer 5.0</td>
			<td>Win 95+</td>
			<td class="center">5</td>

			<td class="center">C</td>
		</tr>
		<tr data-position="3" class="odd_gradeA" id="102"><td>3</td>
			<td>Trident</td>
			<td>Internet Explorer 5.5</td>
			<td>Win 95+</td>
			<td class="center">5.5</td>

			<td class="center">A</td>
		</tr>
		<tr data-position="4" class="even_gradeA" id="103"><td>4</td>
			<td>Trident</td>
			<td class="read_only">Internet Explorer 6(read only cell)</td>
			<td>Win 98+</td>
			<td class="center">6</td>

			<td class="center">A</td>
		</tr>
		<tr data-position="5" class="odd_gradeA" id="104"><td>5</td>
			<td>Trident</td>
			<td>Internet Explorer 7</td>
			<td class="read_only">Win XP SP2+(read only cell)</td>
			<td class="center">7</td>

			<td class="center">A</td>
		</tr>
		<tr data-position="6" class="even_gradeA" id="105"><td>6</td>
			<td>Trident</td>
			<td>AOL browser (AOL desktop)</td>
			<td>Win XP</td>
			<td class="center">6</td>

			<td class="center read_only">A(read only cell)</td>
		</tr>
		<tr data-position="7" class="odd_gradeA" id="106"><td>7</td>
			<td>Gecko (UTF-8: $¢€)</td>
			<td>Firefox 1.0</td>
			<td>Win 98+ / OSX.2+</td>
			<td class="center">1.7</td>

			<td class="center">A</td>
		</tr>
		<tr data-position="8" class="even_gradeA" id="107"><td>8</td>
			<td>Gecko</td>
			<td>Firefox 1.5</td>
			<td>Win 98+ / OSX.2+</td>
			<td class="center">1.8</td>

			<td class="center">A</td>
		</tr>
		<tr data-position="9" class="odd_gradeA" id="108"><td>9</td>
			<td>Gecko</td>
			<td>Firefox 2.0</td>
			<td>Win 98+ / OSX.2+</td>
			<td class="center">1.8</td>

			<td class="center">A</td>
		</tr>
		<tr data-position="10" class="even_gradeA" id="109"><td>10</td>
			<td>Gecko</td>
			<td>Firefox 3.0</td>
			<td>Win 2k+ / OSX.3+</td>
			<td class="center">1.9</td>

			<td class="center">A</td>
		</tr>
		<tr data-position="11" class="odd_gradeA" id="110"><td>11</td>
			<td>Gecko</td>
			<td>Camino 1.0</td>
			<td>OSX.2+</td>
			<td class="center">1.8</td>

			<td class="center">A</td>
		</tr>
		<tr data-position="12" class="even_gradeA" id="111"><td>12</td>
			<td>Gecko</td>
			<td>Camino 1.5</td>
			<td>OSX.3+</td>
			<td class="center">1.8</td>

			<td class="center">A</td>
		</tr>
		<tr data-position="13" class="odd_gradeA" id="112"><td>13</td>
			<td>Gecko</td>
			<td>Netscape 7.2</td>
			<td>Win 95+ / Mac OS 8.6-9.2</td>
			<td class="center">1.7</td>

			<td class="center">A</td>
		</tr>
		<tr data-position="14" class="even_gradeA" id="113"><td>14</td>
			<td>Gecko</td>
			<td>Netscape Browser 8</td>
			<td>Win 98SE+</td>
			<td class="center">1.7</td>

			<td class="center">A</td>
		</tr>
		<tr data-position="15" class="odd_gradeA" id="114"><td>15</td>
			<td>Gecko</td>
			<td>Netscape Navigator 9</td>
			<td>Win 98+ / OSX.2+</td>
			<td class="center">1.8</td>

			<td class="center">A</td>
		</tr>
		<tr data-position="16" class="even_gradeA" id="115"><td>16</td>
			<td>Gecko</td>
			<td>Mozilla 1.0</td>
			<td>Win 95+ / OSX.1+</td>
			<td class="center">1</td>

			<td class="center">A</td>
		</tr>
		<tr data-position="17" class="odd_gradeA" id="116"><td>17</td>
			<td>Gecko</td>
			<td>Mozilla 1.1</td>
			<td>Win 95+ / OSX.1+</td>
			<td class="center">1.1</td>

			<td class="center">A</td>
		</tr>
		<tr data-position="18" class="even_gradeA" id="117"><td>18</td>
			<td>Gecko</td>
			<td>Mozilla 1.2</td>
			<td>Win 95+ / OSX.1+</td>
			<td class="center">1.2</td>

			<td class="center">A</td>
		</tr>
		<tr data-position="19" class="odd_gradeA" id="118"><td>19</td>
			<td>Gecko</td>
			<td>Mozilla 1.3</td>
			<td>Win 95+ / OSX.1+</td>
			<td class="center">1.3</td>

			<td class="center">A</td>
		</tr>
		<tr data-position="20" class="even_gradeA" id="119"><td>20</td>
			<td>Gecko</td>
			<td>Mozilla 1.4</td>
			<td>Win 95+ / OSX.1+</td>
			<td class="center">1.4</td>

			<td class="center">A</td>
		</tr>
		<tr data-position="21" class="odd_gradeA" id="120"><td>21</td>
			<td>Gecko</td>
			<td>Mozilla 1.5</td>
			<td>Win 95+ / OSX.1+</td>
			<td class="center">1.5</td>

			<td class="center">A</td>
		</tr>
		<tr data-position="22" class="even_gradeA" id="121"><td>22</td>
			<td>Gecko</td>
			<td>Mozilla 1.6</td>
			<td>Win 95+ / OSX.1+</td>
			<td class="center">1.6</td>

			<td class="center">A</td>
		</tr>
		<tr data-position="23" class="odd_gradeA" id="122"><td>23</td>
			<td>Gecko</td>
			<td>Mozilla 1.7</td>
			<td>Win 98+ / OSX.1+</td>
			<td class="center">1.7</td>

			<td class="center">A</td>
		</tr>
		<tr data-position="24" class="even_gradeA" id="123"><td>24</td>
			<td>Gecko</td>
			<td>Mozilla 1.8</td>
			<td>Win 98+ / OSX.1+</td>
			<td class="center">1.8</td>

			<td class="center">A</td>
		</tr>
		<tr data-position="25" class="odd_gradeA" id="124"><td>25</td>
			<td>Gecko</td>
			<td>Seamonkey 1.1</td>
			<td>Win 98+ / OSX.2+</td>
			<td class="center">1.8</td>

			<td class="center">A</td>
		</tr>
		<tr data-position="26" class="even_gradeA" id="125"><td>26</td>
			<td>Gecko</td>
			<td>Epiphany 2.20</td>
			<td>Gnome</td>
			<td class="center">1.8</td>

			<td class="center">A</td>
		</tr>
		<tr data-position="27" class="odd_gradeA" id="126"><td>27</td>
			<td>Webkit</td>
			<td>Safari 1.2</td>
			<td>OSX.3</td>
			<td class="center">125.5</td>

			<td class="center">A</td>
		</tr>
		<tr data-position="28" class="even_gradeA" id="127"><td>28</td>
			<td>Webkit</td>
			<td>Safari 1.3</td>
			<td>OSX.3</td>
			<td class="center">312.8</td>

			<td class="center">A</td>
		</tr>
		<tr data-position="29" class="odd_gradeA" id="128"><td>29</td>
			<td>Webkit</td>
			<td>Safari 2.0</td>
			<td>OSX.4+</td>
			<td class="center">419.3</td>

			<td class="center">A</td>
		</tr>
		<tr data-position="30" class="even_gradeA" id="129"><td>30</td>
			<td>Webkit</td>
			<td>Safari 3.0</td>
			<td>OSX.4+</td>
			<td class="center">522.1</td>

			<td class="center">A</td>
		</tr>
		<tr data-position="31" class="odd_gradeA" id="130"><td>31</td>
			<td>Webkit</td>
			<td>OmniWeb 5.5</td>
			<td>OSX.4+</td>
			<td class="center">420</td>

			<td class="center">A</td>
		</tr>
		<tr data-position="32" class="even_gradeA" id="131"><td>32</td>
			<td>Webkit</td>
			<td>iPod Touch / iPhone</td>
			<td>iPod</td>
			<td class="center">420.1</td>

			<td class="center">A</td>
		</tr>
		<tr data-position="33" class="odd_gradeA" id="132"><td>33</td>
			<td>Webkit</td>
			<td>S60</td>
			<td>S60</td>
			<td class="center">413</td>

			<td class="center">A</td>
		</tr>
		<tr data-position="34" class="even_gradeA" id="133"><td>34</td>
			<td>Presto</td>
			<td>Opera 7.0</td>
			<td>Win 95+ / OSX.1+</td>
			<td class="center">-</td>

			<td class="center">A</td>
		</tr>
		<tr data-position="35" class="odd_gradeA" id="134"><td>35</td>
			<td>Presto</td>
			<td>Opera 7.5</td>
			<td>Win 95+ / OSX.2+</td>
			<td class="center">-</td>

			<td class="center">A</td>
		</tr>
		<tr data-position="36" class="even_gradeA" id="135"><td>36</td>
			<td>Presto</td>
			<td>Opera 8.0</td>
			<td>Win 95+ / OSX.2+</td>
			<td class="center">-</td>

			<td class="center">A</td>
		</tr>
		<tr data-position="37" class="odd_gradeA" id="136"><td>37</td>
			<td>Presto</td>
			<td>Opera 8.5</td>
			<td>Win 95+ / OSX.2+</td>
			<td class="center">-</td>

			<td class="center">A</td>
		</tr>
		<tr data-position="38" class="even_gradeA" id="137"><td>38</td>
			<td>Presto</td>
			<td>Opera 9.0</td>
			<td>Win 95+ / OSX.3+</td>
			<td class="center">-</td>

			<td class="center">A</td>
		</tr>
		<tr data-position="39" class="odd_gradeA" id="138"><td>39</td>
			<td>Presto</td>
			<td>Opera 9.2</td>
			<td>Win 88+ / OSX.3+</td>
			<td class="center">-</td>

			<td class="center">A</td>
		</tr>
		<tr data-position="40" class="even_gradeA" id="139"><td>40</td>
			<td>Presto</td>
			<td>Opera 9.5</td>
			<td>Win 88+ / OSX.3+</td>
			<td class="center">-</td>

			<td class="center">A</td>
		</tr>
		<tr data-position="41" class="odd_gradeA" id="140"><td>41</td>
			<td>Presto</td>
			<td>Opera for Wii</td>
			<td>Wii</td>
			<td class="center">-</td>

			<td class="center">A</td>
		</tr>
		<tr data-position="42" class="even_gradeA" id="141"><td>42</td>
			<td>Presto</td>
			<td>Nokia N800</td>
			<td>N800</td>
			<td class="center">-</td>

			<td class="center">A</td>
		</tr>
		<tr data-position="43" class="odd_gradeA" id="142"><td>43</td>
			<td>Presto</td>
			<td>Nintendo DS browser</td>
			<td>Nintendo DS</td>
			<td class="center">8.5</td>

			<td class="center">C/A<sup>1</sup></td>
		</tr>
		<tr data-position="44" class="even_gradeC" id="143"><td>44</td>
			<td>KHTML</td>
			<td>Konqureror 3.1</td>
			<td>KDE 3.1</td>

			<td class="center">3.1</td>
			<td class="center">C</td>
		</tr>
		<tr data-position="45" class="odd_gradeA" id="144"><td>45</td>
			<td>KHTML</td>
			<td>Konqureror 3.3</td>
			<td>KDE 3.3</td>

			<td class="center">3.3</td>
			<td class="center">A</td>
		</tr>
		<tr data-position="46" class="even_gradeA" id="145"><td>46</td>
			<td>KHTML</td>
			<td>Konqureror 3.5</td>
			<td>KDE 3.5</td>

			<td class="center">3.5</td>
			<td class="center">A</td>
		</tr>
		<tr data-position="47" class="odd_gradeX" id="146"><td>47</td>
			<td>Tasman</td>
			<td>Internet Explorer 4.5</td>
			<td>Mac OS 8-9</td>

			<td class="center">-</td>
			<td class="center">X</td>
		</tr>
		<tr data-position="48" class="even_gradeC" id="147"><td>48</td>
			<td>Tasman</td>
			<td>Internet Explorer 5.1</td>
			<td>Mac OS 7.6-9</td>

			<td class="center">1</td>
			<td class="center">C</td>
		</tr>
		<tr data-position="49" class="odd_gradeC" id="148"><td>49</td>
			<td>Tasman</td>
			<td>Internet Explorer 5.2</td>
			<td>Mac OS 8-X</td>

			<td class="center">1</td>
			<td class="center">C</td>
		</tr>
		<tr data-position="50" class="even_gradeA" id="149"><td>50</td>
			<td>Misc</td>
			<td>NetFront 3.1</td>
			<td>Embedded devices</td>

			<td class="center">-</td>
			<td class="center">C</td>
		</tr>
		<tr data-position="51" class="odd_gradeA" id="150"><td>51</td>
			<td>Misc</td>
			<td>NetFront 3.4</td>
			<td>Embedded devices</td>

			<td class="center">-</td>
			<td class="center">A</td>
		</tr>
		<tr data-position="52" class="even_gradeX" id="151"><td>52</td>
			<td>Misc</td>
			<td>Dillo 0.8</td>
			<td>Embedded devices</td>

			<td class="center">-</td>
			<td class="center">X</td>
		</tr>
		<tr data-position="53" class="odd_gradeX" id="152"><td>53</td>
			<td>Misc</td>
			<td>Links</td>
			<td>Text only</td>

			<td class="center">-</td>
			<td class="center">X</td>
		</tr>
		<tr data-position="54" class="even_gradeX" id="153"><td>54</td>
			<td>Misc</td>
			<td>Lynx</td>
			<td>Text only</td>

			<td class="center">-</td>
			<td class="center">X</td>
		</tr>
		<tr data-position="55" class="odd_gradeC" id="154"><td>55</td>
			<td>Misc</td>
			<td>IE Mobile</td>
			<td>Windows Mobile 6</td>

			<td class="center">-</td>
			<td class="center">C</td>
		</tr>
		<tr data-position="56" class="even_gradeC" id="155"><td>56</td>
			<td>Misc</td>
			<td>PSP browser</td>
			<td>PSP</td>

			<td class="center">-</td>
			<td class="center">C</td>
		</tr>
		<tr data-position="57" class="odd_gradeU" id="156"><td>57</td>
			<td>Other browsers</td>
			<td>All others</td>
			<td>-</td>

			<td class="center">-</td>
			<td class="center">U</td>
		</tr>
        
        </tbody>
</table>

            </div><!-- /.box-body -->
            <div class="box-footer">
        		<button type="button" class="btn btn-primary pull-right" onclick="importForm()">Import</button>
        		<div class="">
	        		<label style="margin-right: 20px;" class="">
	        			<input type="checkbox" class="simple" id="checkallpage" value="">Check All
	        		</label>
	        		<!-- Split button -->
					<div class="btn-group">
						<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
							Selected <span class="caret"></span>
						</button>
						<ul class="dropdown-menu" role="menu" id="check_control">
							<li><a href="javascript: moveSelected()" >Move</a>
							<li><a href="javascript: deleteSelected()" >Delete</a></li>
						</ul>
					</div>
        		</div>
            </div>
        </div><!-- /.box -->
    </div><!-- /.col -->
</div>
<div class="buffer" style="display: block; width: 100%; height: 50px;"></div>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content form-container">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal">
					<span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
				</button>
				<h4 class="modal-title">Import Video</h4>
			</div>
			<div class="modal-body">
				<p id="form_alert" style="color: red; display: none;"></p>
	            <div class="box-body">
	                <div class="form-group">
	                    <label for="title">Playlist URL</label>
	                    <input type="text" class="form-control" id="playlist_url" placeholder="Enter Playlist URL" >
	                </div>
	            </div>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
				<button type="button" onclick="importInit(<?php echo $this->subcategory_id; ?>);" class="btn btn-primary">Submit</button>
			</div>
		</div>
		
		<div class="modal-content progress-container" style="display: none;">
			<div class="modal-header">
				<!-- <button type="button" class="close" data-dismiss="modal">
					<span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
				</button> -->
				<h4 class="modal-title">Importing...</h4>
			</div>
			<div class="modal-body" style="font-size: 1.1em;">
				<div class="progress">
					<div class="progress progress-striped active">
	                    <div class="progress-bar progress-bar-primary" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%">
	                        <span class="sr-only">0% Complete</span>
	                    </div>
	                </div>
				</div>
	            
            	<div class="row">
                	<div class="col-sm-6 result-label">Videos found:</div>
                	<div class="col-sm-6 total_count"></div>
                </div>
                <div class="row">
                	<div class="col-sm-6 result-label">Imported:</div>
                	<div class="col-sm-6 success_count"></div>
                </div>
                <div class="row">
                	<div class="col-sm-6 result-label">Conflict:</div>
                	<div class="col-sm-6 conflict_count"></div>
                </div>
                <div class="row">
                	<div class="col-sm-6 result-label">Error (Deleted or Private video):</div>
                	<div class="col-sm-6 error_count"></div>
                </div>
			</div>
			<div class="modal-footer" style="display: none;">
				<button type="button" class="btn btn-default" data-dismiss="modal" onclick="location.reload()" >Close</button>
			</div>
		</div>
		
	</div>
</div>
<!-- <script src="/assets/js/import_tool.js"></script> -->

<div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModal2Label" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content form-container">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal">
					<span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
				</button>
				<h4 class="modal-title">Move Content</h4>
			</div>
			<div class="modal-body">
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
				<button type="button" onclick="moveItem()" class="btn btn-primary">Submit</button>
			</div>
		</div>
	</div>
</div>

<script>
        	$(document).ready(function(){
			    $('#example').dataTable( {
		        	dom:"<'row'T>" +
		        		"<'row'<'col-sm-6'l><'col-sm-6'f>>" +
						"<'row'<'col-sm-12'tr>>" +
						"<'row'<'col-sm-6'i><'col-sm-6'p>>",
			        // columns: [
						            // { data: null, defaultContent: '', orderable: false },
						            // { data: "first_name" },
						            // { data: "last_name" },
						            // { data: "position" },
						            // { data: "office" },
						            // // { data: "start_date" },
						            // { data: "salary"},
						        // ],
			        tableTools: {
			            sRowSelect: "multi",
           				sSwfPath: "/assets/plugins/datatable_1.10.1/extensions/TableTools/swf/copy_csv_xls.swf",
           				sRowSelector: 'td:first-child',
			            aButtons: [
			            	{
				                "sExtends":    "text",
				                "sButtonText": "Delete",
				                "sButtonClass": "btn btn-primary",
			                    "fnClick": function ( nButton, oConfig, oFlash ) {
			                        alert( 'Mouse click' );
			                    }
		                   },
		                   {
				                "sExtends":    "text",
				                "sButtonText": "Delete",
				                "sButtonClass": "btn btn-danger",
			                    "fnClick": function ( nButton, oConfig, oFlash ) {
			                        alert( 'Mouse click' );
			                    }
		                   	}
			            ]
			        }
			    } ).rowReordering();
        	});
        </script>